﻿<html>
  <head> 
    <title>轨迹回放</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
	<style type="text/css">
    .BMap_cpyCtrl {
            display: none;
        }
        .anchorBL {
            display: none;
        }

    </style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4HzsadCh4FDh1Eukq2shC3WT"></script>
<script type="text/javascript" src="../js/markermanager.js"></script>
    <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext/ext-all.js"></script>
    <script type="text/javascript" src="../ext/ext-lang-zh_CN.js"></script>

    <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"/>
    <script type="text/javascript">
        var tilesloaded = 0;
        var infowindowContent;
        var firstzoomstate = 0;
        var terminalinfo = "";
        var terminalinfo1 = "";
        var geocoder;
        var infowindow;
        var infowindow_state = 0;
        var Realtimetrajectory;
        var mgrloaded = 0;
        var startyoun = 0; //是否做好准备
        var encodedPolyline;
        var map;
        var mgr;
        var icons = {};
        var allmarkers = [];
        var iconData = {
            "blank": { width: 20, height: 34 },
            "marke": { width: 20, height: 34 },
            "shadow50": { width: 28, height: 22 },
            "shadow51": { width: 37, height: 34 },
            "us": { width: 24, height: 14 },
            "ca": { width: 24, height: 14 },
            "flag-shadow": { width: 40, height: 30 },
            "house": { width: 32, height: 32 },
            "house-shadow": { width: 59, height: 32 },
            "headquarters": { width: 32, height: 32 },
            "headquarters-shadow": { width: 59, height: 32 }
        };

        function setterminalinfo(instr) {
            terminalinfo = instr;
        }
        function setterminalinfo1(instr) {
            terminalinfo1 = instr;
        }
        function initialize() {

            // 百度地图API功能
            map = new BMap.Map("map_canvas", { enableMapClick: false }); // 创建Map实例 构造底图时，关闭底图可点功能 
            //map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
            map.centerAndZoom("天津", 16);      // 初始化地图,用城市名设置地图中心点
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            map.setCurrentCity("天津");          // 设置地图显示的城市 此项是必须设置的
            //控制控件的位置,anchor:表示停靠在地图的哪个脚，offset指定偏移量，离地图边界相隔多少像素  
            //BMAP_ANCHOR_TOP_LEFT详见百度API说明  
            var opts = { anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(10, 10) };
            map.addControl(new BMap.NavigationControl(opts));  //缩放控件  
            map.addControl(new BMap.ScaleControl());   //比例尺控件  
            map.addControl(new BMap.OverviewMapControl());  //小地图
            map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] })); //地图类型（地图、卫星、三维）

            var padding = 200;
            var mgr = new BMapLib.MarkerManager(map, {
                borderPadding: padding
		, maxZoom: 18
		, trackMarkers: true
            });

            //    map.addEventListener(mgr, 'loaded', function() {
            //		mgrloaded=1;												  
            //		mgrrefresh();
            //  	}); 
            //	 
            infowindow = new BMap.InfoWindow({
                content: document.getElementById("infowindowcontent")
            });
            infowindow.addEventListener('closeclick', function () {
                infowindow_state = 0;
            });
            Realtimetrajectory = new BMap.Polyline({
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2
            });
            //	Realtimetrajectory.setMap(map);
            //            map.addOverlay(Realtimetrajectory);
            Realtimetrajectory.addEventListener('click', Realtimetrajectory_click);

            geocoder = new BMap.Geocoder();

            map.addEventListener('tilesloaded', function () {
                if (tilesloaded == 0) {
                    tilesloaded = 1;
                    startyoun = 1;
                }
            });
        }

        function Realtimetrajectory_click(event) {
            terminalinfo = terminalinfo1 + Number(event.latLng.lng()).toFixed(5) + "," + Number(event.latLng.lat()).toFixed(5) + "<br>";
            setLatLng1(event.latLng.lng(), event.latLng.lat(), 0);
        }
        function getstartyoun() {
            return startyoun;
        }
        function setCenter(jdx, wdy) { //定位函数
            map.setZoom(16);
            map.setCenter(new BMap.Point(jdx, wdy));
        }
        function firstzoom() { //定位函数
            if (firstzoomstate == 0) {
                map.setZoom(12);
                firstzoomstate = 1;
            }
        }
        function setCenter1() { //回到初始的状态
            map.setZoom(3);
            map.setCenter(new BMap.LatLng(39.9493, 116.3975));
        }
        //请在下面网址搜索marker
        //http://www.jbedu.com/study/jishuwenzhang/196.html
        //http://www.codechina.org/doc/google/gmapapi/#Display_Info_Windows_Above_Markers
        //http://koti.mbnet.fi/ojalesa/exam/
        //http://www.cnblogs.com/step1/

        function clearOverlays1() {//从地图中删除所有标记
            if (allmarkers.length > 0) {
                mgr.clearMarkers();
                allmarkers.length = 0;
            }
        }






        // function createfontmarker(jdx,wdy,markertext) {//创建marker,带文字,固定样式
        //	var officeLayer = [
        //	  {
        //		"zoom": [0, 19],
        //		"places": [
        //		  {
        //			"name": markertext,
        //			"icon": ["blank", "shadow50"],
        //			"posn": [jdx,wdy ]
        //		  }
        //		]
        //	  }
        //	];
        //	
        //	
        //  var layer = officeLayer[0];
        //  var place = layer["places"][0];
        //  var icon = getIcon(place["icon"]);
        //  var title = place["name"];
        //  var posn = new BMap.Point(place["posn"][0], place["posn"][1]);
        //  var marker = createMarker(posn,title,icon); 
        //  allmarkers.push(marker);

        //  allmarkers[0].addEventListener('click', function() {
        //  getAddress(allmarkers[0].getPosition().position.lng, allmarkers[0].position.lat);
        //	  infowindow.open(map,allmarkers[0]);
        //	  infowindow_state=1;
        //	});
        //}

        function createfontmarker(jdx, wdy, markertext) {//创建marker,带文字,固定样式
            var officeLayer = [
	  {
	      "zoom": [0, 19],
	      "places": [
		  {
		      "name": markertext,
		      //"icon": ["marke", "shadow50"],
		      "icon": ["blank", "shadow50"],
		      "posn": [jdx, wdy]
		  }
		]
	  }
	];

            var layer = officeLayer[0];
            var place = layer["places"][0];
            var icon = getIcon(place["icon"]);
            var title = place["name"];
            var posn = new BMap.Point(place["posn"][0], place["posn"][1]);
            //var marker = createMarker(posn, title, icon);
            var marker = createMarker(posn, title, '../images/bmp24px/begin3.png');
            allmarkers.push(marker);
            allmarkers[0].addEventListener('click', function () {
                getAddress(allmarkers[0].getPosition().lng, allmarkers[0].getPosition().lat);
                map.openInfoWindow(infowindow, allmarkers[0])
                infowindow_state = 1;
            });

        }

        function getAddress(jdx, wdy) {
            creatediv();
            document.getElementById("infowindowcontent").innerHTML = "<span class='infowindowSTYLE' >" + terminalinfo + "</span>";
            infowindowContent = terminalinfo;
            infowindowContent = infowindowContent.replace(/解析失败/g, "");
            //infowindow.setContent(document.getElementById("infowindowcontent"));
            var latlng = new BMap.Point(jdx, wdy);
            infowindow.setPosition(latlng);
            if (latlng != null) {
                geocoder.getLocation(latlng, function (results) {
                    geocode1(results);
                });
            }
        }

        function geocode1(results) {
            infowindow = new BMap.InfoWindow({
                content: document.getElementById("infowindowcontent")
            });
            infowindow.addEventListener('closeclick', function () {
                infowindow_state = 0;
            });
            //var infowindowContent=infowindow.getContent();
            creatediv();
            //		  if (status == BMap.GeocoderStatus.OK) {
            if (results) {
                //var strarray=new Array();
                strarray = results.address; //(results[0].formatted_address).toString().split(" ");
                //var adressstr="地址："+strarray[0];
                var adressstr = "地址：" + strarray;
                document.getElementById("infowindowcontent").innerHTML = "<span class='infowindowSTYLE' >" + infowindowContent + adressstr + "</span>";
                infowindow.setContent(document.getElementById("infowindowcontent"));
                //infowindow.setPosition(latlng);
                //infowindow.open(map,selmarker);
            } else {
                //alert("No results found");
                document.getElementById("infowindowcontent").innerHTML = "<span class='infowindowSTYLE' >" + infowindowContent + "地址：解析失败" + "</span>";
                infowindow.setContent(document.getElementById("infowindowcontent"));
            }
            //		  } else {
            //			//alert("Geocoder failed due to: " + status);
            //			 document.getElementById("infowindowcontent").innerHTML="<span class='infowindowSTYLE' >"+infowindowContent+"地址：解析失败"+"</span>";
            //			 //infowindow.setContent(document.getElementById("infowindowcontent"));
            //		  }
            //			infowindow.open(map, allmarkers[0]);
            map.openInfoWindow(infowindow, new BMap.Point(allmarkers[0].getPosition().lng, allmarkers[0].getPosition().lat))



            infowindow_state = 1;
        }
        function getIcon(images) {
            var icon = false;
            if (images) {
                if (icons[images[0]]) {
                    icon = icons[images[0]];
                } else {
                    //			var iconImage = new BMap.MarkerImage('images/marke/' + images[0] + '.png',
                    //			new BMap.Size(iconData[images[0]].width, iconData[images[0]].height),
                    //			new BMap.Point(0,0),
                    //			new BMap.Point(iconData[images[0]].width / 2, iconData[images[0]].height));11

                    var posn = new BMap.Point(iconData[images[0]].width / 2, iconData[images[0]].height);
                    var icon = new BMap.Icon('images/marke/' + images[0] + '.png', new BMap.Size(iconData[images[0]].width, iconData[images[0]].height));
                    var iconImage = new BMap.Marker(posn, { icon: icon });

                    //			var iconShadow = new BMap.MarkerImage('images/marke/' + images[1] + '.png',
                    //			new BMap.Size(iconData[images[1]].width, iconData[images[1]].height),
                    //			new BMap.Point(0,0),
                    //			new BMap.Point(0, iconData[images[1]].height));
                    var posn = new BMap.Point(0, iconData[images[1]].height);
                    var icon = new BMap.Icon('images/marke/' + images[0] + '.png', new BMap.Size(iconData[images[1]].width, iconData[images[1]].height));
                    var iconShadow = new BMap.Marker(posn, { icon: icon });

                    var iconShape = {
                        coord: [1, 1, 1, 32, 32, 32, 32, 1],
                        type: 'poly'
                    };
                    icons[images[0]] = {
                        icon: iconImage,
                        shadow: iconShadow,
                        shape: iconShape
                    };
                    icon = icons[images[0]];
                }
            }
            return icon;
        }
        function mgrrefresh() {
            if (mgrloaded == 1) {
                mgr.addMarkers(allmarkers, 0, 19);
                mgr.refresh();
            }
        }

        function setLatLng(jdx, wdy, markeindex) {

            if (allmarkers.length == 0) {
                createfontmarker(jdx, wdy, "");
                mgrrefresh();
            }

            var bounds = map.getBounds(); //返回地图视口边界 bounds(经/纬坐标)
            var southWest = bounds.getSouthWest(); //西南区
            var northEast = bounds.getNorthEast(); //东北地区
            //longitude and latitude 经度和纬度
            var minX = southWest.lng;
            var maxX = northEast.lng;
            var minY = southWest.lat;
            var maxY = northEast.lat;
            if (jdx < minX + 0.005 || jdx > maxX - 0.005 || wdy < minY + 0.005 || wdy > maxY - 0.005) {
                //map.setCenter(new GLatLng(wdy, jdx));

            }
            map.panTo(new BMap.Point(jdx, wdy));
            var markerNum = parseInt(markeindex);
            allmarkers[markerNum].setPosition(new BMap.Point(jdx, wdy)); //移动标记
            openInfoWindow();
            creatediv();
            document.getElementById("infowindowcontent").innerHTML = "<span class='infowindowSTYLE' >" + terminalinfo + "</span>";
            infowindow.setContent(document.getElementById("infowindowcontent"));
            infowindow.setPosition(new BMap.Point(jdx, wdy));
        }

        function setLatLng1(jdx, wdy, markeindex) {
            if (allmarkers.length == 0) {
                createfontmarker(jdx, wdy, "");
                mgrrefresh();
            }
            var markerNum = parseInt(markeindex);
            allmarkers[markerNum].setPosition(new BMap.Point(jdx, wdy)); //移动标记
            openInfoWindow();
            //	getAddress(allmarkers[0].getPosition().lng, allmarkers[0].getPosition().lat);
            infowindow.setPosition(new BMap.Point(jdx, wdy));

            var bounds = map.getBounds(); //返回地图视口边界 bounds(经/纬坐标)
            var southWest = bounds.getSouthWest(); //西南区
            var northEast = bounds.getNorthEast(); //东北地区
            //longitude and latitude 经度和纬度
            var minX = southWest.lng;
            var maxX = northEast.lng;
            var minY = southWest.lat;
            var maxY = northEast.lat;
            if (jdx < minX + 0.005 || jdx > maxX - 0.005 || wdy < minY + 0.005 || wdy > maxY - 0.005) {
                //map.setCenter(new GLatLng(wdy, jdx));
                map.panTo(new BMap.Point(jdx, wdy));
            }

        }


        function createMarker(posn, title, icon) {
            var markerOptions = {
                position: posn,
                flat: false,
                title: title
            };
            if (icon !== false) {
                //markerOptions.shadow = icon.shadow;
                markerOptions.icon = icon;
                //markerOptions.shape  = icon.shape;
            }
            //var marker = new BMap.Marker(markerOptions);


            //var title = title
            var icon = new BMap.Icon(icon, new BMap.Size(32, 70), {    //小车图片
                //offset: new BMap.Size(0, -5),    //相当于CSS精灵
                imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
            });
            var marker = new BMap.Marker(posn, { icon: icon });
            map.addOverlay(marker);

            return marker
        }

        // 创建标注
        //startHisPlay轨迹回放
        function AddHistoryMarker(isShowMarkeLabel, id, lngStr, latStr, timeStr, LicensePlate, value) {
            var valueName = "HistoryPoint01.png";
            if (value < 22.5 && value >= 0) {
                valueName = "HistoryPoint01.png";
            }
            else if (value >= 22.5 && value < 67.5) {
                valueName = "HistoryPoint03.png";
            }
            else if (value >= 67.5 && value < 112.5) {
                valueName = "HistoryPoint05.png";
            }
            else if (value >= 112.5 && value < 157.5) {
                valueName = "HistoryPoint07.png";
            }
            else if (value >= 157.5 && value < 200.5) {
                valueName = "HistoryPoint09.png";
            }
            else if (value >= 200.5 && value < 245.5) {
                valueName = "HistoryPoint11.png";
            }
            else if (value >= 245.5 && value < 292.5) {
                valueName = "HistoryPoint13.png";
            }
            else if (value >= 292.5 && value < 337.5) {
                valueName = "HistoryPoint15.png";
            }
            else if (value >= 337.5 && value <= 360) {
                valueName = "HistoryPoint01.png";
            }

            var point = new BMap.Point(lngStr, latStr); // 起点
            // var myIcon = new BMap.Icon(iconFile, new BMap.Size(24, 24), {
            // imageOffset : new BMap.Size(12, 12)}); // 图片的偏移量。为了是图片底部中心对准坐标点。
            //var reg = /\.bmp$/;
            //var iconFile = iconFileName.replace(reg, '');
            //var size = 24;
            //if ((value == "begin3") || (value == "end3")) {
            //    size = 40;
            //}

            var myIcon = new BMap.Icon("../images/bmp24px/" + valueName, new BMap.Size(24, 24));

            var marker = new BMap.Marker(point, {
                icon: myIcon
            }); // 创建标注

            if (isShowMarkeLabel) {
                var label = new BMap.Label(LicensePlate + " " + timeStr, {
                    offset: new BMap.Size(25, -25)
                });
                marker.setLabel(label);
            }

            //ht.Add(id, marker);
            map.addOverlay(marker); // 将标注添加到地图中
        }

        function startMarker(lngStr, latStr, valueName) {
            var point = new BMap.Point(lngStr, latStr); // 起点
            //var myIcon = new BMap.Icon("../images/bmp24px/begin3.png", new BMap.Size(42, 34));
            var myIcon = new BMap.Icon("../images/bmp24px/" + valueName, new BMap.Size(42, 34), { imageOffset: new BMap.Size(6, 0) });
            var marker2 = new BMap.Marker(point, { icon: myIcon });  // 创建标注
            map.addOverlay(marker2);
        }
        function clearHisPlay() {//从地图中删除所有标记 
            map.clearOverlays();
        }
        function showTheWholeLine(hisPlayStore, length, isShowMarkeLabel) {
//            Ext.MessageBox.wait("请等待，操作需要一定时间！", "提示", {
//                text: "进度条上的文字"
            //            });
//            Ext.MessageBox.alert("提示", "正在加载，请等待...");
            var pointList = [];
            var myRcdLast;
            var pointLast;
            for (i = 0; i < length; i++) {
                var myRcd = hisPlayStore.getAt(i);
                var point = new BMap.Point(myRcd.get('Lng'), myRcd.get('Lat'));
                pointList.push(point);

                if (isShowMarkeLabel) {
                    if (i == 0) {
                        myRcdLast = myRcd;
                        pointLast = point;
                    }
                    var distance = (map.getDistance(pointLast, point)).toFixed(2);
                    if (distance > 30) {
                        myRcdLast = myRcd;
                        pointLast = point;
                        AddHistoryMarker(isShowMarkeLabel, i, myRcd.get('Lng'), myRcd.get('Lat'), myRcd.get('GpsTime'), myRcd.get('Location'), myRcd.get('Direction'));
                    } 
                }
            }
            var polyline = new BMap.Polyline(pointList, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });   //创建折线
            map.addOverlay(polyline);

            map.centerAndZoom(polyline.getBounds().getCenter(), 13);
//            var b = polyline.getBounds();
//            try {
//                BMapLib.AreaRestriction.setBounds(map, b);
//            } catch (e) {
//                alert(e);
//            }
//            Ext.MessageBox.hide();
        }
        function showTheWholeLine1(hisPlayStore, length) {
            var path = Realtimetrajectory.getPath();
                        for (i = 0; i < length; i++) {
                            var myRcd = hisPlayStore.getAt(i);
                            //                            pointList.push(new BMap.Point(, )
                            var point = new BMap.Point(myRcd.get('Lng'), myRcd.get('Lat'));
                            map.centerAndZoom(point, 11);
                            path.push(point);
                        }
            

            //            new BMap.Polyline({
            //                strokeColor: "#FF0000",
            //                strokeOpacity: 1.0,
            //                strokeWeight: 2
            //            });
            map.addOverlay(new BMap.Polyline(path, {
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2
            }));
////            var polyline = new BMap.Polyline({
////                strokeColor: "#FF0000",
////                strokeOpacity: 1.0,
////                strokeWeight: 2
////            });
////            var pointList = polyline.getPath();
////            for (i = 0; i < length; i++) {
////                var myRcd = hisPlayStore.getAt(i);
////                pointList.push(new BMap.Point(myRcd.get('Lng'), myRcd.get('Lat')));
////            }
//////            var polygon = new BMap.Polyline(pointList, {
//////                strokeColor: "#FF0000",
//////                strokeOpacity: 1.0,
//////                strokeWeight: 2
//////            });
//////            map.addOverlay(polygon);
//            var polyline = new BMap.Polyline([
//		new BMap.Point(116.399, 39.910),
//		new BMap.Point(116.405, 39.920),
//		new BMap.Point(116.423493, 39.907445)
//	], { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });   //创建折线
//            map.addOverlay(polyline);   //增加折线

//            var b = polyline.getBounds();
            
        }
        function createline(jdx, wdy) {
            var path = Realtimetrajectory.getPath();
            path.push(new BMap.Point(jdx, wdy));

            //            new BMap.Polyline({
            //                strokeColor: "#FF0000",
            //                strokeOpacity: 1.0,
            //                strokeWeight: 2
            //            });
            map.addOverlay(new BMap.Polyline(path, {
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2
            }));

        }
        function getMapExtents(jdx, wdy) {
            var point = new BMap.Point(jdx, wdy);
            var bounds = map.getBounds();
            if (!(point instanceof BMap.Point) || !(bounds instanceof BMap.Bounds)) {
                return false;
            }
            var sw = bounds.getSouthWest(); //西南脚点
            var ne = bounds.getNorthEast(); //东北脚点
            var isIn = (point.lng >= sw.lng && point.lng <= ne.lng && point.lat >= sw.lat && point.lat <= ne.lat);
            if (!isIn) {
                setCenter(jdx, wdy);
            }
        }
        function drawline() {
            var path = Realtimetrajectory.getPath();
            //            map.addOverlay(new BMap.Polyline(path, {
            //                strokeColor: "#FF0000",
            //                strokeOpacity: 1.0,
            //                strokeWeight: 2
            //            }));
        }
        function removeline() {
            Realtimetrajectory = new BMap.Polyline({
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2
            });
        }
        function closeInfoWindow() {
            if (infowindow_state == 1) {
                infowindow.close();
                infowindow_state = 0;
            }
        }

        function openInfoWindow() {
            if ((allmarkers.length > 0) && (infowindow_state == 0)) {
                //		    infowindow.open(map, allmarkers[0]);
                map.openInfoWindow(infowindow, allmarkers[0])
                infowindow_state = 1;
            }
        }
        function creatediv() {
            if (document.getElementById("infowindowcontent") == null) {
                document.getElementById("infowdiv").innerHTML = "<div id='infowindowcontent'><span class='infowindowSTYLE' >处理中！</span></div>"
            }
        }
    </script> 
</head> 

  <body onload='initialize()'  style='padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px'>
    <div id="map_canvas" style='width:100%;height:100%;left:0px;top:0px;'></div> 
	<div id='infowdiv'><div id='infowindowcontent'><span class='infowindowSTYLE' >处理中！</span></div></div>
  </body> 
</html>
